<template>
  <div class="nav-component">
    <a class="logo" href="javascript:void(0)">
      {{logoName}}
    </a>
    <nav>
      <a
        v-for="(item, index) in navData"
        :key="index"
        :href="item.url"
      >{{ item.text }}</a>
    </nav>
  </div>
</template>

<script>
export default {
  name: "NavComponent",
  props: {
    logoName: String,
    navData: Array
  },
  data() {
    return {
      /*navData: [
        {
          text: '首页',
          url: 'javascript:void(0)'
        },
        {
          text: '妹纸',
          url: 'javascript:void(0)'
        },
        {
          text: '干货',
          url: 'javascript:void(0)'
        },
        {
          text: '专题',
          url: 'javascript:void(0)'
        },
        {
          text: '❤新版进度❤',
          url: 'javascript:void(0)'
        },
      ]*/
    }
  }
}
</script>

<!-- scoped 样式添加作用域范围，只对该组件生效 -->
<style scoped>
.nav-component {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-component .logo {
  font-size: 30px;
  color: #42b983;
  font-weight: bold;
  text-decoration: none;
}

.nav-component nav a {
  text-decoration: none;
  color: #333;
  margin-right: 20px;
}
</style>